<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景和边框</title>
  <style>
    #box-1 {
      /* 添加背景颜色 */
      /* background-color: blanchedalmond; */
      /* background-color: rgb(0, 0, 0); */
      background-color: #f4f4f4;
      /* 边框 */
      border-width: 3px;
      border-color: red;
      border-style: solid;
      border: 3px solid red;
      /* 修改边框，添加圆角 */
      border-radius: 10px;
    }

    #box-2 {
      background: #333;
      color: #fff;
      /* 头部边框 */
      border-top: blue solid 3px;
      /* 左上角 */
      border-top-left-radius: 10px;
      /* 右上角 */
      border-top-right-radius: 10px;
    }

    #box-3 {
      /* 背景图片设置 */
      background-image: url(./img/stars.jpg);
      /* 设置背景图片的大小 
              cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
              cotent：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
      */
      background-size: cover;
      /* 定位 */
      background-position: center center;
      /* 圆角设置 */
      border: 10px solid red;
      border-top-right-radius: 20px;
      border-bottom-left-radius: 20px;
      /* 图片会自动叠加repeat */
      height: 2500px;
      /* 解决图片自动叠加 */
      background-repeat: inherit;

      /*  */
    }
  </style>
</head>

<body>
  <div id="box-1">
    <h3>box one</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloribus in soluta distinctio nemo ducimus
      quis sit rem fugit laboriosam possimus commodi, repellat atque consectetur hic eius provident, iste dignissimos!
    </p>
  </div>

  <div id="box-2">
    <h3>box two</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis id, numquam provident nobis eum adipisci nemo iste
      quam aliquam perspiciatis in nam? Facere atque eligendi excepturi quidem enim minima porro.</p>
  </div>

  <div id="box-3">
    <h3>box three</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat dolorum maiores natus quod itaque id sint nulla
      ipsam adipisci non reiciendis odit, iste ratione, similique ut fugit repellendus molestiae ullam.</p>
  </div>

  <div id="box-4">
    <h3>box four</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta numquam id voluptas, repudiandae labore hic
      commodi in a atque assumenda veritatis rerum iste, nemo possimus dolores deserunt est eveniet magnam!</p>
  </div>

</body>

</html>